<template>
<!-- 评价列表 -->
  <div class="commentList">
    <div class="review">
      <div class="line_1">
        <div class="left">
          <div class="checkBox" :class="[showCurGoods ? 'active' : '']" @click="checkBoxClick"></div>
          <div class="text">只查看当前商品</div>
        </div>
        <div class="right"><span>{{commentInfo.goodRate * 100}}%</span>好评</div>
      </div>
      <div class="line_2">
        <div 
          v-for="(item,index) in 3" 
          :key="item" 
          :class="[activeIndex === index ? 'active' : '']"
          @click="typeClick(index)">
          {{renderItem(index)}}
        </div>
      </div>
    </div>
    <Comment v-for="item in commentInfo.comments" :key="item.commentId" :commentObj="item" />     
  </div>
</template>

<script>
import Comment from './comment'
export default {
  name: 'commentList',
  props: {
    commentInfo: Object, // 评价
  },
  components: {
    Comment
  },
  data () {
    return {
      // commentInfo: {}, // 评价
      showCurGoods: false, // 只看放钱商品
      activeIndex: 1, // 选择的评价分类
    }
  },
  methods: {
    // 是否只看当前商品 点击事件
    checkBoxClick(){
      this.showCurGoods = !this.showCurGoods;
    },
    // 评价分类点击事件
    typeClick(index){
      this.activeIndex = index;
    },
    renderItem(index){
      let text = '';
      switch (index) {
        case 0:
          text = '全部';
          break;
        case 1:
         text = '最热门 ' + this.commentInfo.topCount;
            break;
        case 2:
         text = '有图 ' + this.commentInfo.hasImageCount;   
            break;
        default:
          break;
      }
      return text;
    }
  },
  mounted() {

  }
}
</script>

<style scoped lang="scss">
.commentList{
  background-color: hsl(0, 0%, 98%);
  height: auto;
  padding-top: 20px;
  position: fixed;
  left: 0;
  right: 0;
  top: 84px;
  bottom: 100px;
  overflow-y: scroll;
  .review{
    padding: 32px;
    background-color: white;
    margin-bottom: 20px;
    .line_1{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: nowrap;
      margin-bottom: 40px;
      color: #333;
      font-size: 24px;
      .left{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: nowrap;
        .checkBox{
          width: 32px;
          height: 32px;
          margin-right: 20px;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 32px 32px;
          background-image: url(../../../../static/images/icon-comment.png);
        }
        .active{
          background-image: url(../../../../static/images/icon-comment-active.png);
        }
      }
      .right{
        span{
          color: #ca141d;
        }
      }
    }
    .line_2{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      padding-bottom: 10px;
      div{
        margin-right: 30px;
        color: #333;
        font-size: 24px;
        height: 60px;
        line-height: 56px;
        background-color: #f5f5f5;
        border-radius: 30px;
        padding: 0 30px;
      }
      .active{
        color: #ca141d;
        background-color: rgba(202,20,29,.06);
      }
    }
  }
}
</style>

